<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>卡牌游戏</title>
<link href="styles/matchgame.css" rel="stylesheet">
<style>

	#tbody{
		/*margin-top: 1000px;*/
	}
	.container{  
   width:450px;  
   border:1px solid #6C9C2C;  
   height:25px;  
 }
#bar{  
   background:#95CA0D;  
   float:left; 
   height:100%;  
   text-align:center;  
   line-height:150%; 
 }  
	
	.topmian{
		
		width: 100%;
		height: 60px;
		border-radius: 5px;
		margin: 0 auto;
		
		
	}
	
.div_01{
	float: left;
	line-height: 60px;
	margin-left: 330px;
	
}
.div_02{
	line-height: 60px;
	float: left;
	margin-top: 10px;
	margin-left: 60px;
}
.div_03{
	float: right;
	line-height: 60px;
	margin-right: 500px;
}
</style>

</head>
<body>

<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="scripts/game.js"></script>


<!--<form action="ScoreTop">-->
 	<div class="topmian">
 		<div class="div_01">
 			
 		
 <input type="button" id="btn" value="开始游戏" onclick="run()" style="width: 90px;height: 30px;border-radius: 5px;"/>
 
 </div>
 <div class="div_02">
 	 <div class="container"> 
   <div id="bar" style="width:100%;"></div>  
  </div>  
  <span id="total"></span>
   
</div>	
 	

<div class="div_03">
	<a href="paihangbang.html" style="text-decoration: none;color: white;">点击查询排行榜</a>

</div>
  </div>
   <!--<audio src="audio/Hero's Theme.mp3" autoplay="autoplay"></audio>-->
<section id="hidden_enent" style="display:none">
    <div id="cards">
        <div class="card animated">
            <div class="face front"></div>
            <div class="face back"></div>
        </div>
    </div>

</section>
<!--<audio src="audio/点击图片的效果.mp3"></audio>-->
<!--<bgsound id="sound"></bgsound>-->


<!--<input type="submit" />-->

	
<script type="text/javascript">
$(function(){
	
	//实现随机洗牌
	neusoft.matchingGame.deck.sort(shuffle);
	//alert(neusoft.matchingGame.deck);
	var $card=$(".card");
	for(var i= 0;i<17;i++)
	{
		$card.clone().appendTo($("#cards"));
	}
	
	//对每张牌进行设置
	$(".card").each(function(index)
	{
		//调整坐标
		$(this).css({
			"left":(neusoft.matchingGame.cardWidth+20)*(index%6)+"px",
			"top":(neusoft.matchingGame.cardHeight+20)*Math.floor(index/6)+"px"
		});
		
		//吐出一个牌号
		var pattern=neusoft.matchingGame.deck.pop();
		
		//暂存牌号
		$(this).data("pattern",pattern);
		//把其翻牌后的对应牌面附加上去
		$(this).find(".back").addClass(pattern);
		//点击牌的功能函数挂接
		$(this).click(selectCard);
	});
});
</script>



<script type="text/javascript">

$(function(){

  $('#btn').click(function(){

    if($('#hidden_enent').is(':hidden')){

      $('#hidden_enent').show();
 } 

  })

})

</script>

</body>
</html>